<template>
	<view class="uiwu-button-update" @tap.stop="updateImage">
		<slot>
			<view class="uiwu-button-update-box uiwu-flex uiwu-flex-center">
				<image src="/static/update.png" mode="widthFix"></image>
			</view>
		</slot>
		<view v-if="showClose" @tap.stop="emits('deleImage')">
			<uiwu-icon  color="#dcdcdc" type="clear" size="32" class="uiwu-icon"></uiwu-icon>
		</view>
	</view>
</template>
<script setup lang="ts">
	/**
	 *  uiwu-button-update 图片上传组件
	 * @property {Number} count 图片选择数量 默认 1 
	 * @property {String} postUrl 接口请求地址  如果为空的话，会默认返回图片本地路径 
	 * @property {String} name 服务器接受的文件名称  默认 file
	 * @property {Object} formData 额外参数 {} 
	 * @property {Boolean} isUpdate 是否禁止上传 默认不是 注意 false代表禁止上传  true 代表可以这里没有设计好，懒得修改了 
	 * @property {Boolean} showClose 是否显示删除按钮 默认false
	 * @property {Boolean} isVideo 是否是上传视频 默认false
	 * @event {Function()} change 回调图片地址
	 * @event {Function()} changeWatch 监听图片上传进度  0-100  进度值  
	 * @event {Function()} error 图片上传失败回调 
	 * @event {Function()} deleImage 点击删除按钮 
	 */
	import { inject } from 'vue';
	const uiwu = inject<any>('uiwu')
	const emits = defineEmits(['change','error','changeWatch','deleImage'])
	const props = defineProps({
		count:{
			default:1,
			type:Number
		},
		postUrl:{
			default:'upload/image',
			type:String
		},
		name:{
			default:'file',
			type:String
		},
		formData:{
			default:()=>{
				return {}
			},
			type:Object
		},
		isUpdate:{
			default:true,
			type:Boolean
		},
		showClose:{
			default:false,
			type:Boolean
		},
		isVideo:{
			default:false,
			type:Boolean
		}
	})
	/**
	 * updateImage 选择图片上传
	 */
	const updateImage = async () => {
		if(!props.isUpdate) return false
		const urlPath = await getImage(props.count)
		if(!props.postUrl){
			emits('change',urlPath)
			return
		}
		urlPath.length == 1 ? update(urlPath[0]) : imageMap(urlPath)
	}
	/**
	 * imageMap 图片遍历循环输出
	 * @param {Array} e 图片数组
	 */
	const imageMap = (e) => {
		e.map((val)=>{
			update(val)
		})
	}
	/**
	 * getImage 选择图片
	 * @property {Number} count 一次选择图片的数量 默认1 
	 */
	const getImage = (count=1) =>{
		return new Promise((callback)=>{
			if(props.isVideo){
				uni.chooseVideo({
					success: ({tempFilePath}) => {
						callback([tempFilePath])
					},
					fail: (err) => {
						console.log(err);
					}
				})
				
			}else{
				uni.chooseImage({
					count,
					success: ({tempFilePaths}) => {
						callback(tempFilePaths)
					},
					fail: async (err) => {
						console.log(err);
					}
				})
			}
		})
	}
	/**
	 * update 发起图片上传
	 */
	const update = async (filePath) => {
		const data = await uiwu.updatefile({
			url:props.postUrl,
			filePath,
			name:props.name,
			formData:{...props.formData},
			fileType:props.isVideo ? 'video' : 'image',
			success:(e)=>{
				emits('changeWatch',((e.totalBytesSent / e.totalBytesExpectedToSend)*100).toFixed(0))
			}
		})
		if(data.status !== 200){
			emits('error',data.msg)
			return
		}
		emits('change',data)
	}
</script>
<style lang="scss" scoped>
	.uiwu-button-update-box{
		width: 180rpx;
		height: 160rpx;
		background: rgba(#515B81,0.2);
		border-radius: 16rpx;
		image{
			width: 64rpx !important;
		}
	}
	.uiwu-button-update{
		position: relative;
	}
	.uiwu-icon{
		position: absolute;
		right: -15rpx;
		top: -15rpx;
		z-index: 99;
	}
</style>
